<template>
  <div class="profile-container">
    <PageHeader title="个人信息" />

    <div class="profile-form">
      <van-cell-group inset>
        <van-field v-model="userForm.username" label="用户名" placeholder="请输入用户名" readonly />
        <van-field
          v-model="userForm.nickname"
          label="昵称"
          placeholder="请输入昵称"
          :readonly="!isEditing"
          input-align="right"
        />
        <van-field v-model="userForm.points" label="积分" readonly input-align="right" />
        <van-field label="头像" input-align="right" readonly is-link center>
          <template #input>
            <van-image
              round
              width="50"
              height="50"
              fit="cover"
              :src="userForm.avatar || defaultAvatar"
            />
          </template>
        </van-field>
      </van-cell-group>

      <div class="form-actions">
        <van-button
          v-if="isEditing"
          block
          type="primary"
          @click="saveUserInfo"
          :loading="submitting"
        >保存</van-button>
        <van-button v-else block type="primary" @click="isEditing = true">编辑资料</van-button>
      </div>

      <div class="form-actions" v-if="isEditing">
        <van-button block @click="cancelEdit">取消</van-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { showSuccessToast, showFailToast } from 'vant'
import { useUserStore } from '@/stores/user'
import { updateUserInfo } from '@/api/user'
import PageHeader from '@/components/PageHeader.vue'

const userStore = useUserStore()
const defaultAvatar = 'https://img01.yzcdn.cn/vant/cat.jpeg'

// 是否处于编辑状态
const isEditing = ref(false)
const submitting = ref(false)

// 用户表单数据
const userForm = reactive({
  username: '',
  nickname: '',
  avatar: '',
  points: 0,
})

// 初始化用户数据
const initUserData = () => {
  if (userStore.userInfo) {
    userForm.username = userStore.userInfo.username || ''
    userForm.nickname = userStore.userInfo.nickname || ''
    userForm.avatar = userStore.userInfo.avatar || defaultAvatar
    userForm.points = userStore.userInfo.points || 0
  }
}

// 保存用户信息
const saveUserInfo = async () => {
  if (!userForm.nickname.trim()) {
    showFailToast('昵称不能为空')
    return
  }

  submitting.value = true
  try {
    const res = await updateUserInfo({
      nickname: userForm.nickname,
    })

    if (res.code === 200) {
      showSuccessToast('保存成功')
      isEditing.value = false

      // 刷新用户信息
      await userStore.fetchUserInfo()
    } else {
      showFailToast(res.message || '保存失败')
    }
  } catch (error) {
    console.error('保存用户信息失败:', error)
    showFailToast('保存失败，请稍后再试')
  } finally {
    submitting.value = false
  }
}

// 取消编辑
const cancelEdit = () => {
  isEditing.value = false
  initUserData() // 重新初始化数据
}

onMounted(() => {
  if (userStore.isLoggedIn) {
    initUserData()
  }
})
</script>

<style scoped lang="scss">
.profile-container {
  min-height: 100vh;
  background-color: $background-color;
  padding-bottom: 50px;
}

.profile-form {
  margin-top: $padding-md;
}

.form-actions {
  margin: $padding-lg $padding-md;
}
</style> 